<template>
  <div class="all">

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{reportLevel}} ({{info.username}}) - {{breadNavTitle}} {{dateArea}}</span>
      </ul>

      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>
    <div>

      <div v-if="reportType === 'report'" class="content">
        <table class="myTable">
          <thead>
          <tr>
            <th colspan="20">
              合计
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="deepColor textCenter">
            <td rowspan="2">
              级别
            </td>
            <td class="point" rowspan="2" @click="sortDataList('sub_username', $event, 0)" data-sort="-1" data-area="tableAll">
              账号<i class="myTableI"></i>
            </td>
            <td rowspan="2">
              名称
            </td>
            <td rowspan="2">
              余额
            </td>
            <td class="point" rowspan="2" @click="sortDataList('sub_order_count', $event, 1)" data-sort="-1" data-area="tableAll">
              笔数<i class="myTableI"></i>
            </td>
            <td class="point" rowspan="2" @click="sortDataList('sub_total_order_amount', $event, 1)" data-sort="-1" data-area="tableAll">
              下注金额<i class="myTableI"></i>
            </td>
            <td rowspan="2">
              有效金额
            </td>
            <td colspan="3">
              会员输赢
            </td>
            <td colspan="8">
              {{reportLevel}}输赢
            </td>
            <td rowspan="2">
              上交货量
            </td>
            <td class="point" rowspan="2"  @click="sortDataList('total_give_to_upper', $event, 1)" data-sort="-1" data-area="tableAll">
              上级交收<i class="myTableI"></i>
            </td>
          </tr>
          <tr class="deepColor textCenter">
            <td>
              输赢
            </td>
            <td>
              退水
            </td>
            <td>
              盈亏结果
            </td>
            <td class="point" @click="sortDataList('total_from_downstream', $event, 1)" data-sort="-1" data-area="tableAll">
              应收下线<i class="myTableI"></i>
            </td>
            <td>
              占成
            </td>
            <td>
              实占金额
            </td>
            <td>
              实占结果
            </td>
            <td>
              实占退水
            </td>
            <td>
              赚水
            </td>
            <td>
              赚赔
            </td>
            <td>
              盈亏结果
            </td>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index" :class="(item.o_type == 1 || item.o_type == 2)?'':'deepColor'" class="myTableTr textRight">
            <td :colspan="item.o_type == 1?'1':'4'">
              <span v-if="item.o_type == 1">{{item.sub_level_text}}</span>
              <span v-else-if="item.o_type == 3">总计:{{index}}</span>
              <button v-else class="tableBtn" @click="getPadding(item.sub_username, 'subAll')">
                {{item.row_type}}
              </button>
            </td>
            <td v-if="item.o_type == 1">
              <button class="tableBtn" @click="getAgentReport(item.sub_utype, item.sub_username, 'subAll')">
                {{item.sub_username}}
              </button>
            </td>
            <td v-if="item.o_type == 1">
              {{item.sub_nickname}}
            </td>
            <td v-if="item.o_type == 1">
              <button class="tableBtn" @click="getAgentReport(item.sub_utype, item.sub_username, 'subAll')">
                {{item.sub_balance}}
              </button>
            </td>
            <td>
              {{item.sub_order_count}}
            </td>
            <td>
              {{item.sub_total_order_amount}}
            </td>
            <td>
              {{item.sub_total_order_amount}}
            </td>
            <td>
              {{item.total_member_win}}
            </td>
            <td>
              {{item.total_member_commission_amount}}
            </td>
            <td>
              {{item.total_member_result}}
            </td>
            <td>
            <span :class="parseFloat(item.total_from_downstream) >= 0?'blueSpan':'redSpan'">
              {{item.total_from_downstream}}
            </span>
            </td>
            <td>
              <template v-if="item.o_type == 3">
              </template>
              <template v-else>
                {{item.share}}%
              </template>
            </td>
            <td>
              {{item.total_real_amount}}
            </td>
            <td>
              {{item.total_real_win}}
            </td>
            <td>
              {{item.total_real_comm_amount}}
            </td>
            <td>
              {{item.total_earn_comm_amount}}
            </td>
            <td>
              {{item.total_earn_od_amount}}
            </td>
            <td>
            <span :class="parseFloat(item.total_real_result) >= 0?'blueSpan':'redSpan'">
              {{item.total_real_result}}
            </span>
            </td>
            <td>
              {{item.total_goods_to_upper}}
            </td>
            <td>
            <span :class="parseFloat(item.total_give_to_upper) >= 0?'blueSpan':'redSpan'">
              {{item.total_give_to_upper}}
            </span>
            </td>
          </tr>
          </tbody>
        </table>

        <div :style="detailVisible?'display:block':'display:none'">
          <table class="myTable myTableArray" v-for="(list, key, index) in detailList" :key="index">
            <thead>
            <tr>
              <th colspan="20">
                {{key}}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr class="deepColor textCenter">
              <td rowspan="2">
                级别
              </td>
              <td class="point" rowspan="2" @click="sortDetailList('sub_username', key, $event, 0)" data-sort="-1" :data-area="key">
                账号<i class="myTableI"></i>
              </td>
              <td rowspan="2">
                名称
              </td>
              <td rowspan="2">
                余额
              </td>
              <td class="point" rowspan="2" @click="sortDetailList('sub_order_count', key, $event, 1)" data-sort="-1" :data-area="key">
                笔数<i class="myTableI"></i>
              </td>
              <td class="point" rowspan="2" @click="sortDetailList('sub_total_order_amount', key, $event, 1)" data-sort="-1" :data-area="key">
                下注金额<i class="myTableI"></i>
              </td>
              <td rowspan="2">
                有效金额
              </td>
              <td colspan="3">
                会员输赢
              </td>
              <td colspan="8">
                {{reportLevel}}输赢
              </td>
              <td rowspan="2">
                上交货量
              </td>
              <td rowspan="2" class="point" @click="sortDetailList('total_give_to_upper', key, $event, 1)" data-sort="-1" :data-area="key">
                上级交收<i class="myTableI"></i>
              </td>
            </tr>
            <tr class="deepColor textCenter">
              <td>
                输赢
              </td>
              <td>
                退水
              </td>
              <td>
                盈亏结果
              </td>
              <td class="point" @click="sortDetailList('total_from_downstream', key, $event, 1)" data-sort="-1" :data-area="key">
                应收下线<i class="myTableI"></i>
              </td>
              <td>
                占成
              </td>
              <td>
                实占金额
              </td>
              <td>
                实占结果
              </td>
              <td>
                实占退水
              </td>
              <td>
                赚水
              </td>
              <td>
                赚赔
              </td>
              <td>
                盈亏结果
              </td>
            </tr>
            <tr v-for="(item, subIndex) in list" :key="subIndex" :class="(item.o_type == 1 || item.o_type == 2)?'':'deepColor'" class="myTableTr textRight">
              <td :colspan="item.o_type == 1?'1':'4'">
                <span v-if="item.o_type == 1">{{item.sub_level_text}}</span>
                <span v-else-if="item.o_type == 3">总计:{{subIndex}}</span>
                <button v-else class="tableBtn" @click="getPadding(item.sub_username, item.game)">
                  {{item.row_type}}
                </button>
              </td>
              <td v-if="item.o_type == 1">
                <button class="tableBtn" @click="getAgentReport(item.sub_utype, item.sub_username, item.game)">
                  {{item.sub_username}}
                </button>
              </td>
              <td v-if="item.o_type == 1">
                {{item.sub_nickname}}
              </td>
              <td v-if="item.o_type == 1">
                <button class="tableBtn" @click="getAgentReport(item.sub_utype, item.sub_username, item.game)">
                  {{item.sub_balance}}
                </button>
              </td>
              <td>
                {{item.sub_order_count}}
              </td>
              <td>
                {{item.sub_total_order_amount}}
              </td>
              <td>
                {{item.sub_total_order_amount}}
              </td>
              <td>
                {{item.total_member_win}}
              </td>
              <td>
                {{item.total_member_commission_amount}}
              </td>
              <td>
                {{item.total_member_result}}
              </td>
              <td>
             <span :class="parseFloat(item.total_from_downstream) >= 0?'blueSpan':'redSpan'">
              {{item.total_from_downstream}}
            </span>
              </td>
              <td>
                <template v-if="item.o_type == 3">
                </template>
                <template v-else>
                  {{item.share}}%
                </template>
              </td>
              <td>
                {{item.total_real_amount}}
              </td>
              <td>
                {{item.total_real_win}}
              </td>
              <td>
                {{item.total_real_comm_amount}}
              </td>
              <td>
                {{item.total_earn_comm_amount}}
              </td>
              <td>
                {{item.total_earn_od_amount}}
              </td>
              <td>
            <span :class="parseFloat(item.total_real_result) >= 0?'blueSpan':'redSpan'">
              {{item.total_real_result}}
            </span>
              </td>
              <td>
                {{item.total_goods_to_upper}}
              </td>
              <td>
            <span :class="parseFloat(item.total_give_to_upper) >= 0?'blueSpan':'redSpan'">
              {{item.total_give_to_upper}}
            </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <el-row class="bottomBtn">
          <button @click="hiddenDetail">
            {{btnLabel}}各彩种明细
          </button>
        </el-row>

      </div>

      <div v-if="reportType === 'type'" class="content">
        <table class="myTable">
          <thead>
          <tr>
            <th colspan="18">
              合计
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="deepColor textCenter">
            <td rowspan="2">
              彩种
            </td>
            <td rowspan="2" class="point" @click="sortDataList('wanfa', $event, 0)" data-sort="-1" data-area="type">
              玩法<i class="myTableI"></i>
            </td>
            <td rowspan="2" class="point" @click="sortDataList('order_count', $event, 1)" data-sort="-1" data-area="type">
              笔数<i class="myTableI"></i>
            </td>
            <td rowspan="2" class="point" @click="sortDataList('total_order_amount', $event, 1)" data-sort="-1" data-area="type">
              下注金额<i class="myTableI"></i>
            </td>
            <td rowspan="2">
              有效金额
            </td>
            <td colspan="3">
              会员输赢
            </td>
            <td colspan="8">
              {{reportLevel}}输赢
            </td>
            <td rowspan="2">
              上交货量
            </td>
            <td rowspan="2" class="point" @click="sortDataList('total_give_to_upper', $event, 1)" data-sort="-1" data-area="type">
              上级交收<i class="myTableI"></i>
            </td>
          </tr>
          <tr class="deepColor textCenter">
            <td>
              输赢
            </td>
            <td>
              退水
            </td>
            <td>
              盈亏结果
            </td>
            <td class="point" @click="sortDataList('total_from_downstream', $event, 1)" data-sort="-1" data-area="type">
              应收下线<i class="myTableI"></i>
            </td>
            <td>
              占成
            </td>
            <td>
              实占金额
            </td>
            <td>
              实占结果
            </td>
            <td>
              实占退水
            </td>
            <td>
              赚水
            </td>
            <td>
              赚赔
            </td>
            <td>
              盈亏结果
            </td>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index" :class="item.o_type == 1?'':'deepColor'" class="myTableTr textRight">
            <td :colspan="item.o_type == 1?'1':'2'">
              <span v-if="item.o_type != 2">{{item.game_name}}</span>
              <span v-else>总计：{{index}}行</span>
            </td>
            <td v-if="item.o_type == 1">
              {{item.wanfa}}
            </td>
            <td>
              {{item.order_count}}
            </td>
            <td>
              <button v-if="item.o_type != 2" :class="{'tableBtn':item.o_type != 2}">
                {{item.total_order_amount}}
              </button>
              <span v-else>
              {{item.total_order_amount}}
            </span>
            </td>
            <td>
              {{item.total_order_amount}}
            </td>
            <td>
              {{item.total_member_win}}
            </td>
            <td>
              {{item.total_member_commission_amount}}
            </td>
            <td>
              {{item.total_member_result}}
            </td>
            <td>
            <span :class="parseFloat(item.total_from_downstream) >= 0?'blueSpan':'redSpan'">
              {{item.total_from_downstream}}
            </span>
            </td>
            <td>
              <template v-if="item.o_type == 3">
              </template>
              <template v-else>
                {{item.share}}%
              </template>
            </td>
            <td>
              {{item.total_real_amount}}
            </td>
            <td>
              {{item.total_real_win}}
            </td>
            <td>
              {{item.total_real_comm_amount}}
            </td>
            <td>
              {{item.total_earn_comm_amount}}
            </td>
            <td>
              {{item.total_earn_od_amount}}
            </td>
            <td>
            <span :class="parseFloat(item.total_real_result) >= 0?'blueSpan':'redSpan'">
              {{item.total_real_result}}
            </span>
            </td>
            <td>
              {{item.total_goods_to_upper}}
            </td>
            <td>
            <span :class="parseFloat(item.total_give_to_upper) >= 0?'blueSpan':'redSpan'">
              {{item.total_give_to_upper}}
            </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import $ from 'jquery'
  export default {
    name: 'detailedReport',
    inject: ['reload'],
    methods: {
      sortDetailList(value, key, e, type) {
        $('.point').each(function() {
          if (e.currentTarget.dataset.area === $(this).attr('data-area')) {
            $(this).removeClass('sorting-asc')
            $(this).removeClass('sorting-desc')
            if (!(e.currentTarget == $(this)['0'])) {
              $(this).attr('data-sort', -1)
            }
          }
        })
        if (e.currentTarget.dataset.sort == -1) {
          e.currentTarget.dataset.sort = 1
        }
        if (e.currentTarget.dataset.sort == 1) {
          e.currentTarget.dataset.sort = 0
          e.currentTarget.classList.add('sorting-asc')
        } else {
          e.currentTarget.dataset.sort = 1
          e.currentTarget.classList.add('sorting-desc')
        }
        const total = JSON.parse(JSON.stringify(this.beDetailList[key][this.beDetailList[key].length - 1]))
        this.detailList[key] = JSON.parse(JSON.stringify(this.beDetailList[key]))
        this.detailList[key].splice(this.detailList[key].length - 1, 1)
        this.detailList[key].sort(this.compare(value, e.currentTarget.dataset.sort, type))
        this.detailList[key].push(total)
      },
      sortDataList(value, e, type) {
        $('.point').each(function() {
          if (e.currentTarget.dataset.area === $(this).attr('data-area')) {
            $(this).removeClass('sorting-asc')
            $(this).removeClass('sorting-desc')
            if (!(e.currentTarget == $(this)['0'])) {
              $(this).attr('data-sort', -1)
            }
          }
        })
        if (e.currentTarget.dataset.sort == -1) {
          e.currentTarget.dataset.sort = 1
        }
        if (e.currentTarget.dataset.sort == 1) {
          e.currentTarget.dataset.sort = 0
          e.currentTarget.classList.add('sorting-asc')
        } else {
          e.currentTarget.dataset.sort = 1
          e.currentTarget.classList.add('sorting-desc')
        }
        const total = JSON.parse(JSON.stringify(this.beDataList[this.beDataList.length - 1]))
        this.dataList = JSON.parse(JSON.stringify(this.beDataList))
        this.dataList.splice(this.dataList.length - 1, 1)
        this.dataList.sort(this.compare(value, e.currentTarget.dataset.sort, type))
        this.dataList.push(total)
      },
      compare(key, value, type) {
        // 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
        // 若 a 等于 b，则返回 0。
        // 若 a 大于 b，则返回一个大于 0 的值。
        return function(a, b) {
          let val1 = a[key]
          let val2 = b[key]
          if (type === 0) {
            let temp1 = 0
            let temp2 = 0
            for (let i = 0; i < val1.length; i++) {
              const tempChar = val1.charAt(i)
              temp1 += tempChar.charCodeAt()
            }
            for (let i = 0; i < val2.length; i++) {
              const tempChar = val2.charAt(i)
              temp2 += tempChar.charCodeAt()
            }
            val1 = temp1
            val2 = temp2
          }
          if (value == 1) {
            return val1 - val2
          } else {
            return val2 - val1
          }

          // if (value == 1) {
          //   return 1
          // } else {
          //   return -1
          // }
        }
      },
      hiddenDetail() {
        this.detailVisible = !this.detailVisible
        if (this.detailVisible) {
          this.btnLabel = '- 隐藏'
        } else {
          this.btnLabel = '+ 显示'
        }
      },
      getPadding(value, games) {
        const params = JSON.parse(JSON.stringify(this.payFromParams))
        const tempParams = {
          bt: params.bt,
          et: params.et,
          settle: params.ostatus,
          username: value,
          games: params.games,
          page: 1,
        }
        if (games !== 'subAll') {
          tempParams.games = games
        }
        this.$store.commit('SET_OTHERUSERNAME', value)
        const routeData = this.$router.resolve({
          name: 'noteDetails',
          query: {
            parObj: JSON.stringify(tempParams),
            isPadding: true,
          },
        })
        window.open(routeData.href, '_blank')
      },
      getAgentReport(type, value, games) {
        console.log(type, value, games)
        const params = JSON.parse(JSON.stringify(this.payFromParams))
        // type 判断是代理还是会员 1为代理， 2为会员
        if (parseInt(type) === 1) {
          const tempParams = params
          tempParams.username = value
          if (games !== 'subAll') {
            tempParams.games = []
            tempParams.games.push(games)
          }
          this.$router.push({
            name: 'report_detailedReport',
            query: {
              type: 'report',
              parObj: JSON.stringify(tempParams),
              name: params.username,
            },
          })
        }
        if (parseInt(type) === 2) {
          const tempParams = {
            bt: params.bt,
            et: params.et,
            settle: params.ostatus,
            username: value,
            games: params.games,
            page: 1,
          }
          if (games !== 'subAll') {
            tempParams.games = []
            tempParams.games.push(games)
          }
          this.$store.commit('SET_OTHERUSERNAME', value)
          const routeData = this.$router.resolve({
            name: 'noteDetails',
            query: {
              parObj: JSON.stringify(tempParams),
            },
          })
          window.open(routeData.href, '_blank')
        }
      },
      goBack() {
        this.$router.go(-1)
      },
      fetchData() {
        this.reportType = this.$route.query.type
        if (this.reportType === 'report') {
          const tempParams = JSON.parse(this.$route.query.parObj)
          this.$store.dispatch('GetReport', tempParams)
            .then(() => {
              this.dataList = JSON.parse(JSON.stringify(this.payFrom.data))
              this.detailList = JSON.parse(JSON.stringify(this.payFrom.detail_list))
              this.beDataList = JSON.parse(JSON.stringify(this.dataList))
              this.beDetailList = JSON.parse(JSON.stringify(this.detailList))
              this.dateArea = JSON.parse(JSON.stringify(this.payFrom.date_area))
              this.reportLevel = JSON.parse(JSON.stringify(this.payFrom.report_agent_level))
            })
          this.breadNavTitle = '交收报表'
        } else if (this.reportType === 'type') {
          this.breadNavTitle = '分类报表'
          this.dataList = JSON.parse(JSON.stringify(this.sortForm.data))
          this.beDataList = JSON.parse(JSON.stringify(this.dataList))
        }
      },
    },
    computed: {
      ...mapGetters([
        'info',
        'payFrom',
        'payFromParams',
        'sortForm',
      ]),
    },
    mounted() {
      this.fetchData()
    },
    data() {
      return {
        breadNavTitle: '',
        beDataList: [],
        beDetailList: [],
        dataList: [],
        detailList: [],
        dateArea: '',
        reportLevel: '',
        reportType: '',
        btnLabel: '+ 显示',
        detailVisible: false,
      }
    },
    watch: {
      $route(to, from) {
        // 监控路由变化,从新加载数据
        this.fetchData()
      },
    },
  }
</script>

<style scoped>
  .all{
  }
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }

  .content{
    padding: 10px;
  }
  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .myTable .point{
    cursor: pointer;
  }
  .myTableI{
    padding: 0 8px;
    background: url(/static/agent/img/report/paperclip.png) no-repeat;
  }
  .sorting-asc i {
    background: url(/static/agent/img/report/arrow_up.png) no-repeat;
  }
  .sorting-desc i {
    background: url(/static/agent/img/report/arrow_down.png) no-repeat;
  }
  .deepColor{
    background-color: #F2F2F2;
    text-align: center;
  }
  .tableBtn{
    color:blue;
    background-color: rgba(0,0,0,0);
    border: none;
    outline: none;
    cursor: pointer;
  }
  .tableBtn:hover{
    text-decoration: underline;
    color:red
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
  .myTableArray{
    margin-top: 20px;
  }
  .textCenter{
    text-align: center !important;
    font-weight: bold !important;
  }
  .textRight{
    text-align: right;
  }


  .bottomBtn{
    text-align: center;
    margin-top: 20px;
  }
  .bottomBtn button{
    border:none;
    background-color: rgba(0,0,0,0);
    color:blue;
    font-size:13px;
  }
  .bottomBtn button:hover{
    color:red;
    text-decoration: underline;
  }
  .redSpan{
    color:red
  }
  .blueSpan{
    color:blue
  }
</style>
